<template>
  <div class="uploading">
    <transition name="el-fade-in-linear">
      <el-dialog title="上传中..." :visible.sync="show" width="5.60rem" :show-close="false" :close-on-click-modal="false">
        <div class="device" v-for="device in uploads" :key="device.id">
          <div v-for="(upload, index) in device.uploads" :key="upload.name">
            <div v-if="index <3">
              <div class="info">
                <span>设备:{{device.name||device.id}}</span>
                <span>开始时间:{{upload.startTime}}</span>
                <span>结束时间:{{upload.endTime}}</span>
              </div>
              <div class="info">
                <span>采集模式:{{upload.showCjms}}</span>
                <span>采集频率:{{upload.showCjpl}}</span>
                <span>采集ODR:{{upload.showOdr}}</span>
                <span>采集长度:{{upload.uploads}}/{{upload.total}}</span>
              </div>
              <el-progress :percentage="percentage(upload)" :text-inside="true" :stroke-width="26"
                           :color="customColors"></el-progress>
            </div>
          </div>
        </div>
        <div class="uploading-ops">
          <a @click.stop="doStopUpload"><i class="iconfont icon-stop"></i>停止上传</a>
        </div>
      </el-dialog>
    </transition>
  </div>
</template>

<script>
  import Options from './options';

  export default {
	name: "uploading",
	mixins: [Options],
	data() {
	  return {
		show: true,
		customColors: [
		  {color: '#f56c6c', percentage: 100},
		  {color: '#e6a23c', percentage: 80},
		  {color: '#5cb87a', percentage: 60},
		  {color: '#1989fa', percentage: 40},
		  {color: '#6f7ad3', percentage: 20}
		]
	  }
	},
	props: {
	  uploads: {
		type: Array,
		default: () => []
	  }
	},
	methods: {
	  percentage: function (upload) {
		if (upload.uploads >= upload.total) {
		  return 100;
		}
		return Math.floor(upload.uploads / upload.total * 100);
	  },
	}
  }
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
  @require "../../ui/common/stylus/variable.styl"
  .device {
    margin-bottom 10px;

    .info {
      span {
        display inline-block;
        min-width 100px;
        margin 3px 0;
        margin-right 5px;
      }
    }
  }

  .uploading-ops {
    text-align center;

    a {
      display inline-block;
      border 1px solid $color-danger;
      padding 10px 8px;
      margin-left 5px;
      background-color $color-danger;
      box-shadow 1px 2px 5px $color-danger;
      border-radius 3px;
      cursor pointer;
      transition: all 0.1s ease-out;
      color $color-white;

      i {
        margin-right 5px;
      }

      &:hover {
        position relative;
        transform: scale(1.1);
        color $color-success;
      }
    }
  }
</style>